<template>
	<view id="page_content">
		<tui-tips ref="toast" v-if="index==0"></tui-tips>
		<tui-drawer mode="right" :visible="isopen">
			<headNav @close="closeOpen" @showTips="showTips"></headNav>
		</tui-drawer>
		<view class="page affiliate_dashboard_page affiliate_page">
			<view class="page_header" style="height:190rpx ;">

				<view class="header_center">
					<topWallet :connect="hasToken" @onOpen="openModel"></topWallet>

					<view class="golden-title"><text>RHD商城</text></view>
				</view><button class="menu_btn" @click="navs('showLeft')">
					<image src="/static/images/common/menu.svg" mode="widthFix">
				</button>
			</view>
			<navigator url="/share_links" @click="showDialog">
				<view class="add_link_btn">{{$t('Generate-Link')}}</view>
			</navigator>
			<view class="bottom">
				<view class="tui-product-list" v-if="productList">
					<view class="tui-product-container">
						<block v-for="(item, index) in productList" :key="index" v-if="(index + 1) % 2 != 0 || isList">
							<!-- <template is="productItem" data="{{item,index:index,isList:isList}}" /> -->
							<!--商品列表-->
							<view class="tui-pro-item" :class="[isList ? 'tui-flex-list' : '']" hover-class="hover"
								:hover-start-time="150" @tap="detail(item.goods_id)">
								<image :src="item.pic_cover_small" class="tui-pro-img"
									:class="[isList ? 'tui-proimg-list' : '']" mode="widthFix" />
								<view class="tui-pro-content">
									<view class="tui-pro-tit">{{ item.goods_name }}</view>
									<view>

										<view class="tui-pro-price">
											<view class="tui-sale-price">

												<view>{{ item.promotion_price }}</view>
												<view class="yui-pricebox">PXL</view>
											</view>
											<view class="point-price" v-if="item.point_exchange_type==1">
												+{{item.point_exchange}}礼券</view>

										</view>
										<text class="tui-factory-price"
											v-if="item.market_price>0">￥{{ item.market_price }}</text>

									</view>
								</view>
							</view>
							<!--商品列表-->
						</block>
					</view>
					<view class="tui-product-container" v-if="!isList">
						<block v-for="(item, index) in productList" :key="index" v-if="(index + 1) % 2 == 0">
							<!-- <template is="productItem" data="{{item,index:index}}" /> -->
							<!--商品列表-->
							<view class="tui-pro-item" :class="[isList ? 'tui-flex-list' : '']" hover-class="hover"
								:hover-start-time="150" @tap="detail(item.goods_id)">
								<image :src="item.pic_cover_small" class="tui-pro-img"
									:class="[isList ? 'tui-proimg-list' : '']" mode="widthFix" />
								<view class="tui-pro-content">
									<view class="tui-pro-tit">{{ item.goods_name }}</view>
									<view>

										<view class="tui-pro-price">
											<view class="tui-sale-price">
												<view>{{ item.promotion_price }}</view>
												<view class="yui-pricebox">PXL</view>
											</view>
											<view class="point-price" v-if="item.point_exchange_type==1">
												+{{item.point_exchange}}礼券</view>

										</view>
										<text class="tui-factory-price"
											v-if="item.market_price>0">￥{{ item.market_price }}</text>

									</view>
								</view>
							</view>
							<!--商品列表-->
						</block>
					</view>
				</view>


			</view>

		</view>
		<!-- wallet_pop-->
		<walletPop :walletOpen="open_wallet" :walletModelOpen="open_wallet" @closeWallet="closePop"
			@showTips="showTips"></walletPop>
		<tui-tips ref="toast" position="center"></tui-tips>
		<view v-if="showTabbar">
			<tui-tabbar :current="current" @click="tabbarSwitch" backdropFilter :backgroundColor="backgroundColor"
				:tabBar="tabBar" color="#777" selectedColor="#f4d56f"></tui-tabbar>
		</view>

	</view>
</template>

<script>
	import headNav from "@/components/nav/head_nav.vue"
	import topWallet from "@/components/nav/top_wallet.vue"
	import walletPop from "@/components/nav/wallet_pop.vue"
	export default {
		components: {
			headNav,
			topWallet,
			walletPop
		},
		data() {
			return {
				showPurse: false,
				isopen: false,
				showLink: false,
				hasToken: false,
				open_wallet: false,
				teamData: '',
				current: 3,
				isList: '',
				showTabbar: true,
				backgroundColor: '#191c1d',
				productList: [],
				category_id:1,
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				index: 0,
				tabBar: [{
						pagePath: '/pages/dashboard/faq',
						text: this.$t('question'),
						iconPath: '/static/images/common/eb2ad3e9f15cd5c45523.svg',
						selectedIconPath: '/static/images/common/faq.png',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_links',
						text: this.$t('Promotion-link'),
						iconPath: '/static/images/common/1c328bea0664621ae940.svg',
						selectedIconPath: '/static/images/common/2ddef14ffefdf0893c68.svg',

						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_report',
						text: this.$t('Income-statement'),
						iconPath: '/static/images/common/27ef8eecf3261b27000a.svg',
						selectedIconPath: '/static/images/common/e71ec10e6a3c2f14b631.svg',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/dashboard',
						text: this.$t('control-panel'),
						iconPath: '/static/images/common/e5eb47a4e075e5a7a1e6.svg',
						selectedIconPath: '/static/images/common/0713c468a0e288a09478.svg',
						verify: true
					}
				],

			};
		},
		onLoad: function() {
			this.init();	
			this.hasToken=true
		},
		onShow() {
			this.init();
			this.hasToken=true
		},
		methods: {
			init() {
                this.pageIndex=1;
				let datas = {
					category_id: this.category_id,
					order_type: 1,
					sort: 'asc',
					page: this.pageIndex,
					limit: 20,
				};
				let result = this.tui.request('api/goods/goodsList', 'post', datas, 1000, 1, '', 'goodsList');
				Promise.resolve(result).then((value) => {
					if (value.code == 200) {
						if (value.data.data) {
							this.productList = value.data.data;
							this.pageIndex = this.pageIndex + 1;
						}

					} else {
						// this.tui.toast(value.message);
					}
				})
			},
			tabbarSwitch(e) {

				this.current = e.index;

			},
			detail: function(goods_id) {
				uni.navigateTo({
					url: '/pages/shop/productDetail?goods_id=' + goods_id
				});
			},
			navs() {
				this.isopen = true
				this.showTabbar = false
			},
			openModel() {
				this.open_wallet = true;
			},
			closeOpen() {
				this.isopen = false
				this.showTabbar = true
			},
			goBack() {
				uni.navigateBack()
			},
			connectPurse() {
				this.showPurse = true
			},
			closePurse() {
				this.showPurse = false
			},
			showDialog() {
				this.showLink = true
			},
			closeLink() {
				this.showLink = false
			},
			closePop() {
				this.open_wallet = false;
			},
			showTips: function(msg, type) {

				let options = {
					msg: msg,
					duration: 2000,
					type: type
				};
				this.$refs.toast.showTips(options);
			},

		}
	}
</script>

<style lang="scss">
	@import '../../static/css/defalut.css';

	page {
		// background-color: #0c0d13;
		color: #fff;
		font-family: "Barlow Semi Condensed", sans-serif;
		// font-size: 1.3vw;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}


	.bottom {

		display: flex;
		flex: 1;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		background-color: #0c0d13;
		margin-bottom: 20rpx;
	}

	.golden-title {

		color: #f4d56f;
		font-family: Barlow Semi Condensed;
		font-weight: 500;
		line-height: 56rpx;
		text-shadow: 0 4rpx 8rpx rgba(3, 3, 3, .5);
		width: 750rpx;
		text-align: center;
		font-style: italic;

	}

	.golden-title text {
		justify-content: center;
		margin-top: 2rpx;
		font-size: 48rpx
	}

	/* 商品列表*/

	.tui-product-list {
		margin: 20rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: border-box;
		margin-bottom: 40rpx;
		/* padding: 10rpx 0rpx; */
	}


	.tui-product-container {
		width: 49%;
		/* 	display: flex;
    	justify-content: space-between;
    	flex-wrap: wrap;
    	flex: 1; */
		margin-right: 2%;
	}

	.yui-pricebox {
		font-size: 26rpx;
		margin-left: 4rpx;
		margin-top: 4rpx;
	}

	.tui-product-container:nth-child(2n) {
		margin-right: 0;
	}


	.tui-pro-item {
		width: 100%;
		margin-bottom: 10rpx;
		background: #212a36;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
		transition: all 0.15s ease-in-out;
	}

	.tui-flex-list {
		display: flex;
		margin-bottom: 1rpx !important;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-proimg-list {
		width: 260rpx;
		height: 260rpx !important;
		flex-shrink: 0;
		border-radius: 12rpx;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #777777;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-pro-price {
		padding-top: 18rpx;
		display: flex;
	}

	.tui-sale-price {
		display: flex;
		font-size: 30rpx;
		font-weight: 500;
		color: #f4d56f;
	}

	.tui-sale-prices {
		font-size: 28rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}

	.affiliate_page .top_link.right .link_btn_img_box {
		width: 70rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		border: solid 2rpx rgba(244, 213, 111, .7);
		background-color: rgba(37, 31, 20, .5);
	}

	.affiliate_page .top_link.right .link_btn_img_box_active {
		width: 68rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		border: solid 2rpx rgba(255, 255, 255, .7);
		background-color: #251f14;
	}

	.affiliate_page .top_link.right .link_btn_img_box_active image {
		width: 70%;
		height: 100%;
	}

	.affiliate_page .top_link.right .link_btn_img_box image {
		width: 70%;
		height: 100%;
	}

	image {
		overflow-clip-margin: content-box;
		overflow: clip;
	}

	.buy {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: row;

	}

	.button_buy {
		background-color: #f4d56f;
		width: 200rpx;
	}
</style>